<template>
  <NavBar :title="userInfo.username" left-arrow @click-left="handleBack" />
  <div class="chat-content" ref="chatContent">
    <!-- 如果我未关注对方，则显示查看主页按钮 -->
    <div class="info-content" v-if="!isFollow">
      <div class="info-avatar">
        <img :src="userInfo.avatar" alt="" />
      </div>
      <div class="info-name">
        <span>{{ userInfo.username }}</span>
      </div>
      <van-button type="default" @click="handleUserInfo(userInfo._id)">查看主页</van-button>
    </div>
    <div class="chat-item" v-for="item in privateChatList" :key="item._id">
      <!-- 对方发送的消息 -->
      <div class="message-wrapper receiver" v-if="item.senderId._id !== user.id">
        <div class="avatar">
          <img :src="item.recipientId.avatar" alt="" @click="handleUserInfo(item.senderId._id)" />
        </div>
        <div class="message">{{ item.content }}</div>
      </div>
      <!-- 我发送的消息 -->
      <div class="message-wrapper sender" v-else>
        <div class="message">{{ item.content }}</div>
        <div class="avatar">
          <img :src="item.senderId.avatar" alt="" @click="handleUserInfo(item.senderId._id)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import { userApi } from '@/api/user'
import { chatApi } from '@/api/chat'
const router = useRouter()
const route = useRoute()

const user = JSON.parse(window.localStorage.getItem('user'))

const userInfo = ref({})
const isFollow = ref(false)
const privateChatList = ref([])
const chatContent = ref(null)
const chatContentHeight = ref(0)

const getUserInfo = async () => {
  const res = await userApi.getOtherUserInfo(route.params.id)
  userInfo.value = res.user
  isFollow.value = res.isFollow
}
const getPrivateChatList = async () => {
  const res = await chatApi.getChatHistory(route.params.id)
  privateChatList.value = res
}
const handleBack = () => {
  router.back()
}
const emit = defineEmits(['goUserInfo'])
const handleUserInfo = (id) => {
  emit('goUserInfo', id)
}

const scrollToBottom = () => {
  nextTick(() => {
    // 获取聊天内容高度
    chatContentHeight.value = chatContent.value.scrollHeight
    console.log(chatContentHeight.value)
    // 滚动到底部
    chatContent.value.scrollTo({
      top: chatContentHeight.value,
      behavior: 'smooth',
    })
  })
}
onMounted(async () => {
  await getUserInfo()
  await getPrivateChatList()
  scrollToBottom()
})
defineExpose({
  getPrivateChatList,
})
</script>

<style scoped>
@import '../styles/chat-detail.css';
.info-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  margin-bottom: 10px;
}
.info-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
}
.van-button {
  width: 100px;
  height: 30px;
  color: var(--color-black);
  font-size: var(--font-size-sm);
}
</style>
